<template>
	<view class="bar_settle">
		<view class="choose_btn" :class="{active:selectedAll}">
			<view class="btn_circle" @click="select_all()">
				<uni-icons style="color: #fff;font-size: 0.3rem;" v-if="selectedAll" type="checkmarkempty"></uni-icons>
			</view>
			<text>全选</text>
		</view>
		<view class="right_settle">
			<view class="sum_block">
				<text>合计：</text>
				<text class="sum">￥{{count}}</text>
			</view>
			<view class="settle">
				<button @click="settle_all()" type="default" size="mini">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			vm: {
				type: Object,
				default: function() {
					return {
						cart_id: "cart_id",
						title: "title",
						img: "img",
						user_id: "user_id",
						state: "state",
						price: "price",
						price_ago: "price_ago",
						price_count: "price_count",
						num: "num",
						goods_id: "goods_id",
						description: "description",
						selected: "selected"
					}
				}
			}
		},
		data() {
			return {
				sum_price: 0
			}
		},
		computed: {
			count() {
				var sum_price = 0
				this.list.map(o => {
					if (o.selected) {
						sum_price += o.price_count
					}
				})
				return sum_price
			},
			selectedAll() {
				return this.list.every(o => o.selected)
			}
		},
		methods: {
			// 全选
			select_all() {
				if (this.selectedAll) {
					this.list.map(o => {
						o.selected = false
					})
				} else {
					this.list.map(o => {
						o.selected = true
					})
				}
			},
			// 根据当前时间和随机数生成流水号
			order_code() {
				var orderCode = '';
				for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
				{
					orderCode += Math.floor(Math.random() * 10);
				}
				orderCode = new Date().getTime() + orderCode; //时间戳，用来生成订单号。
				return orderCode;
			},
			// 单个结算
			async settle_one(obj, index, order_number) {
				// 获取被选中的商品
				var {
					title,
					img,
					price,
					price_ago,
					price_count,
					num,
					goods_id,
					description,
					user_id,
					cart_id
				} = obj


				// 获取联系方式
				var address_promise = new Promise((resolve, reject) => {
					this.$get('~/api/address/get_obj?', {
						user_id,
						default: 1
					}, res => {
						if (res.result) {
							resolve(res.result.obj);
						} else {
							this.$toast("地址未添加")
							return
						}
					})
				})
				var {
					name: contact_name,
					phone: contact_phone,
					address: contact_address,
					postcode: postal_code
				} = await address_promise

				// 请求参数
				var body = {
					order_number,
					title,
					img,
					price,
					price_ago,
					price_count,
					num,
					goods_id,
					description,
					contact_name,
					contact_phone,
					contact_address,
					postal_code,
					user_id
				}
				// 发送添加订单请求
				await new Promise((resolve, reject) => {
					this.$post('~/api/order/add?', body, (res) => {
						if (res.result) {
							this.$toast("加入订单成功");
							resolve()
						}
					})
				})
				// 删除购物车
				await new Promise((resolve, reject) => {
					this.$get('~/api/cart/del?', {
						cart_id
					}, (res) => {
						if (res.result) {
							this.list.splice(index, 1)
							resolve()
						}
					})
				})
			},
			// 选中的结算
			settle_all() {
				// 生成订单号
				var order_number = this.order_code()
				// 选出选中的物品
				var list_settle = this.list.map(async (o, i) => {
					if (o.selected) {
						await this.settle_one(o, i, order_number)
						this.$nav("/order/details?order_number=" + order_number)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.choose_btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.choose_btn .circle {
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
	}

	.choose_btn .btn_circle {
		display: inline-block;
		width: 0.9rem;
		height: 0.9rem;
		margin-right: 0.5rem;
		border-radius: 50%;
		border: 1px solid var(--color_grey);
	}

	.choose_btn.active {
		color: var(--color_primary);
	}

	.choose_btn.active .btn_circle {
		background-color: var(--color_primary);
		border: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bar_settle {
		width: 100%;
		height: 2.5rem;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.8rem;
		border-top: 1px solid #eee;
	}

	.right_settle {
		display: flex;
		justify-content: space-between;
	}

	.sum_block {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 0.5rem;
	}

	.sum {
		color: var(--color_red);
	}

	.settle {
		display: flex;
		align-items: center;
	}
</style>
